$.fn.extend({
    "uploadImgDiv":function(param){
		param=$.extend({
			divWidth:150,//宽度
			divHeight:150,//高度
			defaultImg:"resources/plugins/uploadImg/img/addImg.jpg",//默认的空图片
			deleteImg:"resources/plugins/uploadImg/img/X.jpg",//默认的删除图片
			uploadUrl:"uploadImg",//上传地址，一般需要调用该方法的时候传过来
			maxNumber:5,//最大可上传图片数量
			valueName:"url",//提交时的name名字
			uploadValueName:"file",//上传名字
			imgPath:baseServciePath//图片基础路径，非必填
			//initUrl:arrayObj//这里是初始化图片数组对象
		},param);
		
		var mainClass="upload_main";
		
		$this=$(this);
		$this.addClass(mainClass);
		
		var number=0;
		
		
		//第一个上传item
		if(param.initUrl==null){
			createItme($this,number);
		}else{
			//判断是否为字符串
			if(Object.prototype.toString.call(param.initUrl) === "[object String]"){
				var initTempStr=param.initUrl
				param.initUrl=new Array();
				param.initUrl.push(initTempStr);
			}
			//循环初始化图片地址数组
			for(var i=0;i<param.initUrl.length;i++){
				if(param.initUrl[i]!=""){
					createItme($this,++number,param.initUrl[i]);
				}
			}
			createItme($this,++number);
		}
		
		/**
		 * 创建item的方法
		 * 每一个图片框是一个div，一个div中有6个元素，分别为:
		 * 图片:主体图片，未上传之前的默认图片和上传完之后显示的图片
		 * 文件框：隐藏的文件框，通过点击图片来触发他的点击事件，当值发生变化时，也就是用户选择完图片时，将其上传(调用upload方法)
		 * input框：隐藏的文本框，这个input框是用来保存上传上去的图片的路径，在form提交时能够一起被提交上去
		 * 删除图片：显示在图片的右上角，点击以后将图片还原到原始状态，清空input框里面的内容
		 * tipsSapn:用于显示提示信息和上传进度
		 */
		function createItme(currentMain,currentNumber,initValue){
			var div=$("<div></div>");
			div.attr("style",'margin: 10px;width: '+param.divWidth+'px;height: '+param.divHeight+'px;position: relative;cursor:pointer;display:inline-block');
			var img=$('<img id="img'+currentNumber+'" style="width: '+param.divWidth+'px;height: '+param.divHeight+'px;z-index: 0;position: absolute;" src="'+param.defaultImg+'">');
			div.append(img);
			img.click(function(){
				$(this).next().click();
			});
			
			var file=$('<input type="file" class="divFile" name="'+param.uploadValueName+'" id="input'+currentNumber+'" style="display: none;">');
			div.append(file);
			file.change(function(){
				upload(this);
			});
			
			var input=$('<input type="text" class="divText" name="'+param.valueName+'" id="url'+currentNumber+'" style="display:none;">');
			div.append(input);
			
			
			var deleteImg=$('<img id="delete'+currentNumber+'" width="20" height="20" src="'+param.deleteImg+'" style="z-index: 10;position: absolute;left: '+(param.divWidth-20)+'px;">');
			div.append(deleteImg);
			deleteImg.hide();
			deleteImg.click(function(){
				param.maxNumber++;
				$(this).parent("div").remove();
				currentMain.find("div:last").show();
				currentMain.find("div:last").find("input[name=url]").attr("name",param.valueName);
				currentMain.find("div:last span").html('还可以添加'+(param.maxNumber-number+1)+'张');
			});
			
			var tips=$('<span id="tips"'+currentNumber+' style="width:'+param.divWidth+'px;text-align:center;font-size:12px;color:#999;position:absolute;top:'+(param.divHeight*0.6)+'px;z-index:0;">还可以添加'+(param.maxNumber-number+1)+'张</span>')
			tips.click(function(){
				$(this).prevAll(".divFile").click();
			});
			div.append(tips);
			
			//到达上限时，隐藏添加
			
			if(initValue!=null){
				div.find(".divText").val(initValue);
				div.find("img:first").attr("src",param.imgPath+"/"+initValue);
				div.find("span:last").html("");
				div.find("img:last").show();
				//div.find("input[name=url]").attr("name",param.valueName);
			}else{
				if(number>param.maxNumber){
					//console.info(div.find("#url"));
					div.find("input[name=url]").attr("name","");
					div.hide();
				}
			}
			
			currentMain.append(div);
		}
		
		/**
		 * 上传文件的方法。
		 * 前期预想是该方法可以以参数的形式传递进来
		 * 但是这里做成控件之后，上传之后的回调方法不需要做其他操作，所以方法写成固定的
		 * (上传的URL还是作为参数传递进来)
		 */
		function upload(obj){
			var id=$(obj).attr("id");
			var imgNode=$(obj).prev();
			var textNode=$(obj).next();
			var deleteNode=$(obj).next().next();
			var tips=$(obj).nextAll("span");
			var currentMain=$(obj).parents("."+mainClass);
			
			var file = $(obj)[0].files[0];
            if(checkFile(file) === false){
                return false;
            }
             
            
            var form=createUploadForm(id);
            //console.info(form.find("input"));
            //console.info(form.find("input").val());
            form.ajaxForm({
        		type:"post",
        		dataType:"json",
        		success:function(data,statusText){
        			if(data.status==0){
						imgNode.attr("src",param.imgPath+"/"+data.data.img);
						textNode.val(data.data.img);
						deleteNode.show();
						tips.html("");
						if(parseInt(id.substring(5,id.length))==number){
							createItme(currentMain,++number)
						}
			        }else{
			        	var alertStr="图片大小超过最大限制3M";
			        	if(data.msg!=""){
			        		alertStr=data.msg;
			        	}
			        	optAlert(alertStr)
			        }
        		},
        		uploadProgress : function(event, position, total, percentComplete) {//进度条
        			console.info(id+"-上传中。。"+percentComplete+"%");
        			tips.html("正在上传..."+percentComplete+"%");
        		},
        		error:function(data){
        			console.info(data);
        			var alertStr="上传错误，请联系管理员";
		        	if(data.msg!=""){
		        		alertStr=data.msg;
		        	}
		        	optAlert(alertStr)
        		},
        		beforeSend : function() {//上传之前设置，在这里可以写验证
        			console.info(id+"-上传开始。。");
        		},
        		complete : function(data) {
        			console.info(id+"-上传结束");
        		}
        	}).submit();
            
            
            return;
            //原本使用的XMLHttpRequest，但是在一个项目中出现了session丢失的情况，所以换成了jquery的ajaxfrom
            var xhr=new XMLHttpRequest();
            var fd=new FormData();
            fd.append("file", file);
            fd.append("dir", "images");
 
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    /*if(callback instanceof Function){
                        callback(xhr.responseText);
                    }*/
                	var data=eval("("+xhr.responseText+")");
                	if(data.status==0){
						imgNode.attr("src",param.imgPath+"/"+data.data.img);
						textNode.val(data.data.img);
						deleteNode.show();
						tips.html("");
						if(parseInt(id.substring(5,id.length))==number){
							createItme(currentMain,++number)
						}
			        }else{
			        	var alertStr="图片大小超过最大限制3M";
			        	if(data.msg!=""){
			        		alertStr=data.msg;
			        	}
			        	optAlert(alertStr)
			        }
                }
            }
 
            //侦查当前附件上传情况
            xhr.upload.onprogress = function(evt) {
                loaded = evt.loaded;
                tot = evt.total;
                per = Math.floor(100 * loaded / tot); //已经上传的百分比
                /*if(uploading instanceof Function){
                    uploading(per);//回调方法
                }*/
				tips.html("正在上传..."+per+"%");
            };
 
            xhr.open("post", param.uploadUrl);
            xhr.send(fd);
            return;
		}
		
		
		function checkFile(file){
			if(file==null)
				return false;
			if(file.type.indexOf("image")!=0){
				try{
					$.messager.alert("提示","请上传正确格式的图片");
				}catch(e){
					alert("请上传正确格式的图片");
				}
				return false;
			}
			return true;
		}
		
		
		function createUploadForm(uploadFileId){
			var formId="uploadForm"+uploadTempId;
			var form=$('<form id="'+formId+'" action="upload/uploadImg" enctype="multipart/form-data"></form>');
			var dir=$('<input type="hide" name="dir" value="images">');
			var oldFile=$("#"+uploadFileId);
			var file=oldFile.clone();
			//为新的文件框添加修改事件
			file.change(function(){
				upload(this);
			});
			//console.info(oldFile.val());
			//console.info(file.val());
			oldFile.attr("id","uploadFile"+uploadTempId++);
			oldFile.before(file);
			form.append(oldFile);
			form.append(dir);
			form.hide();
			$("body").append(form);
			return form;
		}
		
		function optAlert(alertStr){
			try{
        		$.messager.alert("",alertStr);
        	}catch(e){
        		alert(alertStr);
        	}
		}
		
	}
});